<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台框架</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
    <div class="yz-top">
        <div class="yz-log"></div>
        <div class="yz-nav">
            <ul class="yz-nav-menu">
            </ul>
        </div>
        <div class="yz-logined"></div>
    </div>
    <div class="yz-bottom">
        <div class="yz-left">
            <ul>
            </ul>
        </div>
        <div class="yz-right">
            <div class="yz-sub-nav">
                <a href="#first">首页</a>
            </div>
            <div class="yz-content">
                <iframe data-identity="#first" src="./home.html"></iframe>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            let domain = 'http://localhost:5281/';
            $.ajax({
                type: 'get', dataType: 'json', cache: false,
                url: domain + 'api/Menu/List',
                success: function (data) {
                    if (data.code === 200) {
                        let modulars = data.data.modular
                        $(modulars).each(function (i, v) {
                            $('.yz-nav-menu').append(`<li modular="m${v.id}">${v.title}</li>`)
                        })
                        $('.yz-nav-menu li:first').addClass('focus');
                        let menus = data.data.menu;
                        $(menus).each(function (i, v) {
                            let $li = document.createElement('li');
                            $($li).addClass('display-none').attr('modular', `m${v.modular}`);
                            if (v.children !== undefined) {
                                $($li).html(`<a href="javascript:;">${v.title}</a>`);
                                let $dl = document.createElement('dl');
                                $($dl).addClass('sub-menu');
                                $(v.children).each(function (j, o) {
                                    $($dl).append(`<dd modular="m${o.modular}"><a href="#${o.identity}" data-href="${o.url}">${o.title}</a></dd>`)
                                });
                                $($li).append($dl)
                            } else {
                                $($li).html(`<a href="#${v.identity}" data-href="${v.url}">${v.title}</a>`);
                            }
                            $('.yz-left ul').append($li)
                        });
                        $('.yz-left ul li').each(function () {
                            if ($(this).attr('modular') === 'm1') {
                                $(this).removeClass('display-none')
                            }
                        })
                    }
                }
            })
            $('.yz-nav-menu').on('click', 'li', function () {
                let $modular = $(this).attr('modular');
                $('.yz-nav-menu li').removeClass('focus');
                $(this).addClass('focus');
                $('.yz-left li').addClass('display-none');
                $(`.yz-left li[modular='${$modular}']`).removeClass('display-none');
            });
            $('.yz-content iframe:first').css('display', 'block');
            $('.yz-left ul').on("click", "li a", function () {
                let $url = $(this).data('href'), $href = $(this).attr('href'), $txt = $(this).text();
                let $par = $(this).parent()
                if ($url == undefined) {
                    if (!$par.hasClass('focus')) {
                        $('.yz-left li').removeClass('focus');
                        $par.addClass('focus');
                    } else if ($par.find('dl').length > 0) {
                        $par.removeClass('focus')
                    }
                } else {
                    let $tagName = $(this).parent()[0].tagName;
                    if ($tagName !== 'DD' && $tagName !== 'dd') {
                        $('.yz-left ul li').removeClass('focus')
                    } else {
                        $('.yz-left ul li dd').removeClass('focus')
                    }
                    $par.addClass('focus')
                    openNewPage($url, $href, $txt, $par.attr('modular'))
                }
            })
            $('.yz-right .yz-sub-nav').on('click', 'a', function () {
                let $identity = $(this).attr('href'), $modular = $(this).attr('modular');
                $('.yz-right .yz-sub-nav a').removeClass('focus');
                $(this).addClass('focus');
                if ($identity === '#first') {
                    return false
                }
                $('.yz-nav-menu li').removeClass('focus');
                $(`.yz-nav-menu li[modular='${$modular}']`).addClass('focus');
                $('.yz-left li').addClass('display-none');
                $(`.yz-left li[modular='${$modular}']`).removeClass('display-none')
                $('.yz-left li').removeClass('focus');
                $(`.yz-left li a[href=${$identity}]`).parents('li').addClass('focus');
                $('.yz-left li dd').removeClass('focus');
                $(`.yz-left li a[href=${$identity}]`).parents('dd').addClass('focus');
                $('.yz-content iframe').each(function () {
                    if ($(this).data('identity') === $identity) {
                        $('.yz-content iframe').css('display', 'none')
                        $(this).css('display', 'block')
                    }
                })
            })
            $('.yz-right .yz-sub-nav').on('click', 'a i', function (event) {
                let $url = window.location.href;
                if ($url.indexOf('#') > 1) {
                    $url = $url.substr(0, $url.indexOf('#'));
                }
                event.stopPropagation(); // 阻止事件冒泡到父元素
                let $parent = $(this).parent(), $identity = $parent.attr('href');
                if ($parent.hasClass('focus')) {
                    let $modular = '', $nidentity = '';
                    if ($parent.next().length > 0) {
                        $modular = $parent.next().attr('modular');
                        $nidentity = $parent.next().attr('href');
                        $parent.next().addClass('focus');
                        $('.yz-content iframe').each(function () {
                            if ($(this).data('identity') === $identity) {
                                $(this).next().css('display', 'block')
                            }
                        })
                    } else {
                        $modular = $parent.prev().attr('modular');
                        $nidentity = $parent.prev().attr('href');
                        $parent.prev().addClass('focus');
                        $('.yz-content iframe').each(function () {
                            if ($(this).data('identity') === $identity) {
                                $(this).prev().css('display', 'block')
                            }
                        })
                    }
                    $('.yz-left li').removeClass('focus');
                    $('.yz-left li dd').removeClass('focus');
                    if ($nidentity !== '#first') {
                        $url += $nidentity;
                        $('.yz-nav-menu li').removeClass('focus');
                        $(`.yz-nav-menu li[modular='${$modular}']`).addClass('focus');
                        $('.yz-left li').addClass('display-none');
                        $(`.yz-left li[modular='${$modular}']`).removeClass('display-none');
                        $(`.yz-left li a[href=${$nidentity}]`).parents('li').addClass('focus');
                        $(`.yz-left li a[href=${$nidentity}]`).parents('dd').addClass('focus');
                    }
                    console.log($url, 111)
                    let urlObj = new URL($url);
                    history.pushState({}, '', urlObj);
                }
                $('.yz-content iframe').each(function () {
                    if ($(this).data('identity') === $identity) {
                        $(this).remove()
                    }
                })
                $parent.remove();
            })
            function openNewPage(url, identity, txt, $modular) {
                let $flag = true;
                $('.yz-content iframe').css('display', 'none').each(function () {
                    if ($(this).data('identity') === identity) {
                        $('.yz-right .yz-sub-nav a').removeClass('focus');
                        $(`.yz-right .yz-sub-nav a[href=${identity}]`).addClass('focus');
                        $flag = false
                        $(this).css('display', 'block')
                    }
                });
                if ($flag) {
                    $('.yz-right .yz-sub-nav a').removeClass('focus');
                    let $frame = document.createElement('iframe');
                    $($frame).attr({ 'data-identity': identity, 'src': url }).css('display', 'block');
                    $('.yz-content').append($frame);
                    let $a = document.createElement('a');
                    $($a).attr({'href': identity, 'modular': $modular}).html(txt + '<i>×</i>').addClass('focus');
                    $('.yz-sub-nav').append($a)
                }
            }
        })
    </script>
</body>
</html>